<template>
  <p>用户页</p>

  <el-row :gutter="20">

    <el-col :span="20" :xs="24">
      <!-- 搜索 -->
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :inline="true"
          label-width="68px"
        >

          <el-form-item>

            <el-button
              type="primary"
              @click="batchGenNo"
              v-loading="genNoLoading"
              v-hasPermi="['custom:order:batchGenNo']"
            >
              {{genNoBtnText}}
            </el-button>

            <el-button @click="handleQuery"><Icon icon="ep:search" />订单号查询</el-button>

            <el-button
              type="primary"
              @click="grabOrders"
              v-loading="grabLoading"
              v-hasPermi="['custom:order:grabOrders']"
            >
              {{grabBtnText}}
            </el-button>

            <el-button @click="listByAll"><Icon icon="ep:search" />订单查询</el-button>

          </el-form-item>
        </el-form>
      </ContentWrap>

      <ContentWrap>
        <p>生成的订单号列表</p>
        <el-table v-loading="loading" :data="list">
          <el-table-column label="订单号ID" align="center" key="id" prop="id" />
          <el-table-column label="订单号" align="center" key="orderNo" prop="orderNo" />
          <el-table-column label="状态" key="status" prop="status">
            <template #default="scope">
              <span>{{0 == scope.row.status ? "未使用" : "已使用"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180"
          />

        </el-table>
      </ContentWrap>

      <ContentWrap>
        <p>订单列表</p>
        <el-table v-loading="listLoading" :data="orderList">
          <el-table-column label="订单ID" align="center" key="id" prop="id" />
          <el-table-column label="订单号" align="center" key="orderNo" prop="orderNo" />
          <el-table-column label="用户ID" align="center" key="userId" prop="userId" />
          <el-table-column label="用户名称" align="center" key="userName" prop="userName" />
          <el-table-column label="状态" key="status" prop="status">
            <template #default="scope">
              <span>{{0 == scope.row.status ? "失败" : "成功"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180"
          />

        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>



</template>


<script setup lang="ts">

import * as OrderApi from '@/api/custom/order'
import {dateFormatter} from "@/utils/formatTime";
import {batchGenNo} from "@/api/custom/order";

defineOptions({ name: 'CustomOrder' })

const loading = ref(true) // 列表的加载中
const listLoading = ref(true) // 列表的加载中

const genNoLoading = ref(false) // 列表的加载中

const grabLoading = ref(false) // 列表的加载中

const list = ref([]) // 列表的数
const orderList = ref([]) // 列表的数

const genNoBtnText = ref('批量生成订单号');
const grabBtnText = ref('抢单');

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await OrderApi.queryNoList()
    console.log(data)
    list.value = data
  } finally {
    loading.value = false
  }
}

const batchGenNo = async () => {
  genNoLoading.value = true
  genNoBtnText.value = '订单号生成中'
  try {
    const data = await OrderApi.batchGenNo()
    console.log(data)

    getList()
  } finally {
    genNoLoading.value = false
    genNoBtnText.value = '批量生成订单号'
  }
}

const grabOrders = async () => {
  grabLoading.value = true
  grabBtnText.value = '抢单中'
  try {
    const data = await OrderApi.grabOrders()
    console.log(data)

    listByAll()
    getList()
  } finally {
    grabLoading.value = false
    grabBtnText.value = '抢单'
  }
}
const listByAll = async () => {
  listLoading.value = true
  try {
    const data = await OrderApi.listByAll()
    console.log(data)
    orderList.value=data;
  } finally {
    listLoading.value = false
  }
}

/** 初始化 */
onMounted(() => {

  console.log('初始化------------------------')

  getList()
  listByAll()
})

</script>
